<template>
  <div class="moveable-el" ref="refElement">
    <template v-if="info.type === 'word'">
      <span :style="{ fontSize: info.size * 2 + 'pt' }">{{ info.content }}</span>
    </template>
    <template v-if="info.type === 'business'">
      <span :style="{ fontSize: info.size * 2 + 'pt' }">
        <template v-if="BusinessElementText">
          {{ BusinessElementText }}
        </template>
        <template v-else>
          {{ setTestBusinessTest(info) || '业务字段' }}
        </template>
      </span>
    </template>
    <template v-if="info.type === 'barCode'">
      <img v-if="labelNumber" ref="refBarCodeImg" style="width: 100%; height: 100%" alt="" />
      <img
        v-else
        style="width: 100%; height: 100%"
        src=""
        alt=""
      />
    </template>
    <template v-if="info.type === 'qrCode'">
      <div v-if="labelNumber" class="print-label-qrcode" ref="refQrCodeImg"></div>
      <img
        v-else
        style="width: 100%; height: 100%"
        src=""
        alt=""
      />
    </template>

    <close-circle-outlined v-if="!labelNumber" class="label-del-element" @click="del" @touchend="del" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from 'vue'
import { CloseCircleOutlined } from '@ant-design/icons-vue'
import jsBarcode from 'jsbarcode'
import QRCode from 'qrcodejs2-fix'
import { setTestBusinessTest } from './form'
const props = defineProps<{
  info: any
  labelNumber?: any
  BusinessElementText?: any
}>()
const refElement = ref()
const emits = defineEmits(['del'])

function setStyle() {
  const { width, height, left, top } = props.info
  refElement.value.style.width = width + 'pt'
  refElement.value.style.height = height + 'pt'
  refElement.value.style.transform = `translate(${left}pt, ${top}pt)`
}

function del() {
  emits('del')
}

// 生成二维码
const refQrCodeImg = ref()
function createdEwm() {
  nextTick(() => {
    if (refQrCodeImg.value) {
      new QRCode(refQrCodeImg.value, {
        text: props.labelNumber,
        width: 50,
        height: 50,
        colorDark: '#000000', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
      })
    }
  })
}
// 生成条形码
const refBarCodeImg = ref()
function createdTxm() {
  nextTick(() => {
    if (refBarCodeImg.value) {
      jsBarcode(refBarCodeImg.value, props.labelNumber, {
        lineColor: '#000',
        width: 50,
        margin: 0,
        height: 100,
        displayValue: false
      })
    }
  })
}
onMounted(() => {
  createdTxm()
  createdEwm()
  setStyle()
})
</script>

<style lang="less">
.label-del-element.anticon {
  position: absolute;
  right: -26px;
  top: -18px;
  font-size: 18px;
  display: none;
}

.print-label-qrcode {
  position: relative;
  width: 100%;
  height: 100%;
}
.print-label-qrcode img {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
